<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>人力资源</title>
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content">

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-6">
                    <div th:class="row">
                        <div class="col-sm-12">
                            <section class="panel">
                                <header class="panel-heading">
                                    人力资源
                                    <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                                </header>
                                <div class="panel-body">
                                    <div class="panel">
                                        <div class="panel-body">
                                            <div class="row">

                                                <div class="col-sm-3 p-states">
                                                    <span class="state-title">全院员工总数</span>
                                                    <h3 th:text="${dataModel.getEmployeesOnDuty()}"></h3>
                                                </div>
                                                <div class="col-sm-3 p-states">
                                                    <span class="state-title">在编人数  </span><i class="fa fa-question-circle" title="在医保系统注册的人数"></i>
                                                    <h3 th:text="${dataModel.getNumberOfStaff()}"></h3>
                                                </div>
                                                <div class="col-sm-3 p-states">
                                                    <span class="state-title">卫生技术人员数  </span><i class="fa fa-question-circle" title="包含医师数，护理人员数，医技人数"></i>
                                                    <h3 th:text="${dataModel.healthTechnicalPersonnel}"></h3>
                                                </div>
                                                <div class="col-sm-3 p-states">
                                                    <span class="state-title">医护比  </span><i class="fa fa-question-circle" title="临床医疗人数与护理人数之比"></i>
                                                    <h3 th:text="${'1 : '+ #numbers.formatDecimal(dataModel.getMultipleDepartments(),1,2)}"></h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="panel">
                                        <div class="panel-body">
                                            <div class="row">

                                                <div class="col-sm-6 p-states">
                                                    <span class="state-title">急诊科固定的医师、护理人员占比  </span>
                                                    <i class="fa fa-question-circle" title="急诊科固定的医师、护理人员占全院员工的比例"></i>
                                                    <h3 th:text="${#numbers.formatPercent(dataModel.emergencyDoctorsAndNursesPercent, 1, 2)}"></h3>
                                                </div>
                                                <div class="col-sm-6 p-states">
                                                    <span class="state-title">麻醉、儿科、重症、病理、中医医师占比  </span>
                                                    <i class="fa fa-question-circle" title="麻醉、儿科、重症、病理、中医医师占全院员工的比例"></i>
                                                    <h3 th:text="${#numbers.formatPercent(dataModel.doctorPercent, 1, 2)}"></h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel">
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-sm-6 p-states">
                                                    <span class="state-title">药学专业技术人员构成比  </span>
                                                    <i class="fa fa-question-circle" title="药学专业技术人员占全院员工的比例"></i>
                                                    <h3 th:text="${#numbers.formatPercent(dataModel.pharmaceuticalProfessionalsPercent, 1, 2)}"></h3>
                                                </div>
                                                <div class="col-sm-6 p-states">
                                                    <span class="state-title">每百张病床药师人数  </span>
                                                    <i class="fa fa-question-circle" title="药师人数 / 开放床位数 * 100"></i>
                                                    <h3 th:text="${#numbers.formatDecimal(dataModel.pharmaceuticalProfessionalsPer100Beds, 1, 2)}"></h3>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </section>
                        </div>
                    </div>
                    <div th:class="row">
                        <div class="col-sm-12">
                            <section class="panel">
                                <header class="panel-heading">
                                    卫生技术人员职称构成比  <i class="fa fa-question-circle" title="医师、护理人员、医技人员的各职称占比"></i>
                                    <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                                </header>
                                <div class="panel-body" id="pie1" style="height:350px;">
                                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                                </div>
                            </section>
                        </div>
                    </div>
                    <div th:class="row">
                        <div class="col-sm-12">
                            <section class="panel">
                                <header class="panel-heading">
                                    麻醉人员职称构成比  <i class="fa fa-question-circle" title="麻醉人员的各职称占比"></i>
                                    <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                                </header>
                                <div class="panel-body" id="pie2" style="height:350px;">
                                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                                </div>
                            </section>
                        </div>
                    </div>

                </div>
                <div class="col-sm-6">
                    <div th:class="row">
                        <div class="col-sm-12">
                            <section class="panel">
                                <header class="panel-heading">
                                    人员结构  <i class="fa fa-question-circle" title="全院各个类型的人员分布情况"></i>
                                    <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                                </header>
                                <div class="panel-body" id="main" style="height:350px;">
                                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                                </div>
                            </section>
                        </div>
                    </div>
                    <div th:class="row">
                        <div class="col-sm-12">
                            <section class="panel">
                                <header class="panel-heading">
                                    药学专业技术人员构成比  <i class="fa fa-question-circle" title="药学专业技术人员的各职称占比"></i>
                                    <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                                </header>
                                <div class="panel-body" id="pie3" style="height:350px;">
                                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--body wrapper end-->
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>


<script type="text/javascript">
    $(document).ready(function () {

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getHumanResources",
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    //alert(JSON.stringify(result));
                    myChart.hideLoading();    //隐藏加载动画
                    const option = {
                        // title: {
                        //     text: '某站点用户访问来源',
                        //     subtext: '纯属虚构',
                        //     left: 'center'
                        // },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'right',
                        },
                        series: [
                            {
                                name: '人员类型',
                                type: 'pie',
                                radius: '50%',
                                data: result,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + errorMsg);
                myChart.hideLoading();
            }
        });//end ajax

        let pie1 = echarts.init(document.getElementById('pie1'));
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getPie1",
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    //alert(JSON.stringify(result));
                    pie1.hideLoading();    //隐藏加载动画
                    const option = {
                        // title: {
                        //     text: '某站点用户访问来源',
                        //     subtext: '纯属虚构',
                        //     left: 'center'
                        // },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '职称类型',
                                type: 'pie',
                                radius: '50%',
                                data: result,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    pie1.setOption(option);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + errorMsg);
                pie1.hideLoading();
            }
        });//end ajax

        let pie2 = echarts.init(document.getElementById('pie2'));
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getPie2",
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    //alert(JSON.stringify(result));
                    pie2.hideLoading();    //隐藏加载动画
                    const option = {
                        // title: {
                        //     text: '某站点用户访问来源',
                        //     subtext: '纯属虚构',
                        //     left: 'center'
                        // },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '职称类型',
                                type: 'pie',
                                radius: '50%',
                                data: result,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    pie2.setOption(option);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + errorMsg);
                pie2.hideLoading();
            }
        });//end ajax



        let pie3 = echarts.init(document.getElementById('pie3'));
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getPie3",
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    //alert(JSON.stringify(result));
                    pie3.hideLoading();    //隐藏加载动画
                    const option = {
                        // title: {
                        //     text: '某站点用户访问来源',
                        //     subtext: '纯属虚构',
                        //     left: 'center'
                        // },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '职称类型',
                                type: 'pie',
                                radius: '50%',
                                data: result,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    pie3.setOption(option);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + errorMsg);
                pie3.hideLoading();
            }
        });//end ajax
    });//刷新方法结束

</script>
</body>